<template>
    <el-dialog
            :title="title"
            :visible.sync="visible"
            :close-on-click-modal=false
            :close-on-press-escape=false
            :show-close=false
            width="70%">
        <el-form
                label-width="150px"
                :model="deptSearchForm"
                ref="deptSearchForm">
            <el-row>
                <el-col :span="16">
                    <el-form-item class="form-item" label="部门名称:" prop="searchValue">
                        <el-input placeholder="输入关键字进行过滤" v-model="searchValue"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6" :offset="2">
                    <el-form-item v-if="firstType == null" class="form-item" label="只显示本级部门:" prop="localRegion">
                        <el-switch v-model="localRegion" active-color="#13ce66" inactive-color="#DCDFE6"></el-switch>
                    </el-form-item>
                    <el-form-item v-if="firstType != null" class="form-item" label="第一级部门类型:" prop="localRegion">
                        <el-select v-model="firstTypeSelectValue">
                            <el-option value="-1" label="全部"/>
                            <el-option value="1" label="区域"/>
                            <el-option value="2" label="单位"/>
                            <el-option value="3" label="部门/科室"/>
                            <el-option value="4" label="下属单位"/>
                            <el-option value="5" label="乡镇街道"/>
                            <el-option value="6" label="村、社区"/>
                            <el-option value="7" label="网格"/>
                            <el-option value="9" label="虚拟组织"/>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div>
            <el-row>
                <el-col :span="16">
                    <div style="height:300px;overflow:auto;margin-left: 30px">
                        <el-tree class="filter-tree"
                                 :data="deptData"
                                 v-loading=loading
                                 :load="getDeptChildren"
                                 lazy
                                 show-checkbox
                                 check-strictly
                                 node-key="id"
                                 ref="deptTree"
                                 accordion
                                 highlight-current
                                 :props="defaultProps"
                                 :default-checked-keys="checkedKeys"
                                 @check-change="nodeCheck" v-show="lazy">
                        </el-tree>
                        <el-tree class="filter-tree"
                                 v-loading=loading
                                 :data="deptSynData"
                                 node-key="id"
                                 show-checkbox
                                 check-strictly
                                 ref="deptSynTree"
                                 :default-expand-all="true"
                                 accordion
                                 highlight-current
                                 :props="defaultProps"
                                 :default-checked-keys="checkedKeys"
                                 @check-change="nodeCheck" v-show="!lazy">
                        </el-tree>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div style="margin-left: 10px;">
                        <h3>已选部门：</h3>
                        <el-tag style="margin: 5px" v-if="deptNames" v-for="name in deptNames" :key="name">{{name}}</el-tag>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel()">取 消</el-button>
            <el-button type="primary" @click="confirm()">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import {getDeptTree, getDeptXieTree} from "@/api/system";
    import {mapGetters} from "vuex";

    export default {
        name: "deptCheck",
        created() {
            this.lazy = true;
            this.debouncedGetSearchResult = _.debounce(this.getSearchResult, 500);
        },
        data() {
            return {
                deptIds: [],
                deptNames: [],
                searchValue: '',//搜索文字
                deptData: [],//组织机构树数据
                deptSynData: [],
                lazy: true,
                localRegion: true,
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                loading: false,
                deptSearchForm:{},
                firstTypeSelectValue: null
            }
        },
        props: {
            // 第一级部门类型，参考后台枚举类 com/bostech/pums/admin/api/entity/enums/SysDeptTypeEnum.java
            //"1":"区域"
            //"2":"单位"
            //"3":"部门/科室"
            //"4":"下属单位"
            //"5":"乡镇街道"
            //"6":"村、社区"
            //"7":"网格"
            //"9":"虚拟组织"
            firstType: {
                type: String
            },
            // 最小部门类型，小于此类型的子部门不会显示，type为null会显示。参考后台枚举类 com/bostech/pums/admin/api/entity/enums/SysDeptTypeEnum.java
            //"1":"区域"
            //"2":"单位"
            //"3":"部门/科室"
            //"4":"下属单位"
            //"5":"乡镇街道"
            //"6":"村、社区"
            //"7":"网格"
            //"9":"虚拟组织"
            miniType: {
                type: String,
                default: null
            },
            title: {
                type: String,
                default: '部门选择'
            },
            showCheckbox: {
                type: Boolean,
                default: false
            },
            visible: {
                type: Boolean,
                default: false
            },
            checkedKeys:{
                type: Array,
                default: () => []
            }
        },
        computed: mapGetters(["deptInfo"]),
        watch: {
            searchValue(newValue, oldValue) {
                if (newValue.length <= 1) {
                    this.lazy = true;
                } else if (newValue) {
                    this.lazy = false;
                    this.loading = true;
                    this.getSearchResult(newValue);
                }
            },
            localRegion(newValue, oldValue) {
                this.lazy = true;
                this.searchValue = "";
                this.loading = true;
                let queryParams = {
                    miniType: this.miniType
                };
                if (newValue) {
                    queryParams.parentId = this.deptInfo.parentId
                } else {
                    queryParams.parentId = -2
                }
                getDeptTree(queryParams).then(response => {
                    this.loading = false;
                    this.deptData = response.data.data;
                })
            },
            firstTypeSelectValue(){
                this.loading = true;
                let queryParams = {
                    firstType: this.firstTypeSelectValue
                };

              getDeptTree(queryParams).then(response => {
                    this.loading = false;
                    this.deptData = response.data.data;
                })
            },
//            visible(newValue, oldValue) {
//                if(newValue){
//                  this.firstTypeSelectValue = this.firstType;
//                }
//            }
        },
        methods: {
            // 获取组织机构树
            getSearchResult(value) {
                let param = {};
                param.name = value;
                if (this.localRegion) {
                    param.areaCode = this.deptInfo.areaCode
                }
                getDeptXieTree(param).then(response => {
                    this.loading = false;
                    this.deptSynData = response.data.data;
                })
            },
            // 获取组织机构树
            getDeptChildren(node, resolve) {
                this.loading = true;
                let queryParams = {};
                if(node.level == 0 && this.firstType != null && this.firstType != undefined) {
                    if(this.firstType == "-1"){
                        queryParams.parentId = -1;
                    }else {
                        queryParams.firstType = this.firstTypeSelectValue;
                    }
                }else {
                    queryParams.miniType = this.miniType;
                    if (this.localRegion && node.level == 0) {     //node.level == 0说明是第一级：全国、浙江省、、、
                        queryParams.parentId = this.deptInfo.parentId;
                    } else if (!this.localRegion && node == undefined) {
                        queryParams.parentId = -2;
                    } else if (this.localRegion && node.data.length == 0) {
                        queryParams.parentId = this.deptInfo.parentId;
                    } else {
                        queryParams.parentId = node.data.id
                    }
                }
                getDeptTree(queryParams).then(response => {
                    this.loading = false;
                    resolve(response.data.data);
                })
            },
            //组织机构树点击事件
            nodeCheck(data, checked, indeterminate) {
                if(checked){
                    this.deptIds.push(data.id);
                    this.deptNames.push(data.name);
                    this.checkedKeys.push(data.id);
                }else{
                    this.deptIds.splice(this.deptIds.findIndex(id => id === data.id ),1);
                    this.deptNames.splice(this.deptNames.findIndex(name => name === data.name),1);
                    this.checkedKeys.splice(this.deptIds.findIndex(id => id === data.id ),1);

                }
            },
            cancel() {
                this.$emit('cancel',this.deptIds.join(","), this.deptNames.join(","))
            },
            confirm() {
              if(this.deptIds==null||this.deptIds.length==0){
                this.$message({
                  message: '请先选择部门',
                  type: 'warning'
                });
                return;
              }else if(this.deptIds.length>0){
                this.$emit('getCheckInfo',this.deptIds.join(","), this.deptNames.join(","))
              }
            }
        }
    };
</script>

<style lang="scss">
    .el-tree > .el-tree-node {
        min-width: 100%;
        min-height: 100%;
        display: inline-block;
    }
</style>
